<template>
  <div class="round-search-bar">
    <input type="text"
           v-model="search"
           class="input-search"
           @keydown.enter="doSearch">
    <button class="btn-search"
            @click="doSearch">
      <img src="./../assets/icon_search.svg"
           class="icon-search">
    </button>
  </div>
</template>

<script>
import Util from "@/common/util"
export default {
  name: 'round-search-bar',
  props: ['search'],
  data () {
    return {

    }
  },
  methods: {
    doSearch () {
      console.log(this.search);
      Util.searchAPI(this.$router, this.search)
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../themes/base.less";
.round-search-bar {
  width: 400px;
  position: relative;
  display: inline-block;
}
.input-search {
  width: 100%;
  height: @round-search-bar-height;
  border-radius: @round-search-bar-border-radius;
  border: solid 1px #dfe1e5;
  padding: 20px;
  box-sizing: border-box;
  font-size: 1.2em;
}
.btn-search {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: @round-search-bar-height;
  background: none;
  border: none;
  outline: none;
  font-size: 1.2em;
}
.icon-search {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>